﻿<h2>Navigation Examples</h2>

<FluentStack Orientation="Orientation.Horizontal">
    <!-- Menu with sub-items and icons -->
    <FluentNavMenu @bind-Expanded=MenuExpanded Title="Databound demo">
        <FluentNavGroup Id="Group1" Title="Item 1" @bind-Expanded=Item1Expanded Icon="@(new Icons.Regular.Size24.LeafOne())">
            <FluentNavLink Icon="@(new Icons.Regular.Size24.LeafOne())">Item 1.1</FluentNavLink>
            <FluentNavLink Icon="@(new Icons.Regular.Size24.LeafTwo())">Item 1.2</FluentNavLink>
        </FluentNavGroup>
        <FluentNavGroup Id="Group2" Title="Item 2" @bind-Expanded=Item2Expanded Icon="@(new Icons.Regular.Size24.LeafTwo())">
            <FluentNavLink Icon="@(new Icons.Regular.Size24.LeafOne())">Item 2.1</FluentNavLink>
            <FluentNavLink Icon="@(new Icons.Regular.Size24.LeafTwo())">Item 2.2</FluentNavLink>
        </FluentNavGroup>
    </FluentNavMenu>
    <FluentStack Orientation="Orientation.Vertical">

        <h2>Expanded elements</h2>
        <FluentCheckbox @bind-Value=MenuExpanded>
            <span aria-label="Menu expanded">Menu</span>
        </FluentCheckbox>
        <FluentCheckbox @bind-Value=Item1Expanded>
            <span aria-label="Item 1 expanded">Item 1</span>
        </FluentCheckbox>
        <FluentCheckbox @bind-Value=Item2Expanded>
            <span aria-label="Item 2 expanded">Item 2</span>
        </FluentCheckbox>

        

    </FluentStack>
</FluentStack>

@code {
    bool MenuExpanded = true;
    bool Item1Expanded = true;
    bool Item2Expanded = true;
}


